<template>
  <div>
      <div class="dialog_cover" v-if="isShow" @touchmove.prevent @click="isShow = false"></div>
       <section data-i="选择职业" propertyid="32" >
          <a href="javascript:;" class="aRight" v-if="entity.AccountInfoType == 2">
              <div class="order-container bg-fff f30  border-bottom " @click="show()">
                  <span class="span-icon-xinhao"><em>{{entity.Name}}</em>
                  </span>
                  <span class="danwei" >{{selectItemKey !== '' ? selectItemKey:'请选择' }}
                  <!-- <img class="toRight fr" src="../../../assets/images/pllist-ico.png" alt  ="toRight"> -->
                  </span>
                   <i class="toRight fr"></i>
              </div>
          </a>
          <div class="bottom-bomb bomb-danxuan bg-f1" v-if="entity.AccountInfoType == 2 && isShow">
              <div>{{entity.PropertyType}}</div>
              <div class="bomb-title border-bottom border-top bg-fff">
                  <h1 class="f32 color-666 text-center">{{entity.Name}}</h1>
                  <i class="bomb-close" @click="closeModal()"></i>
              </div>
              <div class="bomb-content">
                  <ul class="bomb-li-item bg-fff">
                  <li v-for="v in entity.Options" @click="selectValue(v)" class="border-bottom">{{v}}</li>
                  </ul>
              </div>
         </div>
      </section>

       <div class="order-container bg-fff f30  color-000 border-bottom" v-if="entity.AccountInfoType != 2&&entity.AccountInfoType != 4&&entity.AccountInfoType != 3">
                    <span style="width: 2rem;word-break:normal; white-space:pre-wrap;word-wrap : break-word" :class="{'span-icon-xinhao':entity}">{{entity.Name}}</span>
                    <input :maxlength="entity.MaxLength" type="text" v-model="value"
                    @focus="onFocus('gameAccount')" @blur="onBlur('gameAccount');" @input="checkError(1)"
                    :placeholder="'请输入'+entity.Name" >
        </div>
    <div class="contaner-qq" v-if="entity.AccountInfoType != 2&&entity.AccountInfoType != 4&&entity.AccountInfoType != 3&& AllInforType">
      <p class="f24 border-bottom ">请输入{{entity.Name}}。</p>
    </div>
      <div class="order-container bg-fff f30  color-000 border-bottom" v-if="entity.AccountInfoType == 4">
        <span :class="{'span-icon-xinhao':entity}">{{entity.Name}}</span>
        <input type="email" v-model="value"
               @focus="onFocus('gameAccount')" @blur="onBlur('gameAccount');" @input="checkError(2)"
               :placeholder="'请输入'+entity.Name" >
      </div>

      <div class="contaner-qq" v-if="entity.AccountInfoType == 4 && emileGameAccount">
        <p class="f24 border-bottom ">你填写的邮箱不是正规的邮箱，请重新填写。</p>
      </div>
        <div class="item-container bg-fff f30  color-000 border-bottom" v-if="entity.AccountInfoType == 4 && !emileGameAccount && isEmileGameAccount">
          <div class="item-case">
            <p v-for="item in EMailSuffixs" @click="isEmileNext(item)">
              {{value| valueSplite}}{{item}}
            </p>
          </div>

        </div>
      <div v-if="entity.AccountInfoType == 4&&!emileGameAccount&& !isEmileGameAccount" v-for="item in EMailRegInfoConfigs">
        <section data-i="选择职业" propertyid="32" v-if="item.AccountInfoType ==2" >
          <a href="javascript:;" class="aRight" v-if="item.AccountInfoType == 2">
            <div class="order-container bg-fff f30  border-bottom " @click="showEmile(item)">
                  <span class="span-icon-xinhao"><em>{{item.Name}}</em>
                  </span>
              <span class="danwei isEmeileQuery" :id="item.Id" :title="item.Name" v-if="item.Name=='邮箱密保问题1'">{{selectItemKey1!== '' ? selectItemKey1:'请选择' }}
                <!-- <img class="toRight fr" src="../../../assets/images/pllist-ico.png" alt  ="toRight"> -->
                  </span>
              <span class="danwei isEmeileQuery" :id="item.Id" :title="item.Name" v-if="item.Name=='邮箱密保问题2'">{{selectItemKey2!== '' ? selectItemKey2:'请选择' }}
                <!-- <img class="toRight fr" src="../../../assets/images/pllist-ico.png" alt  ="toRight"> -->
                  </span>
              <span class="danwei isEmeileQuery" :id="item.Id" :title="item.Name" v-if="item.Name=='邮箱密保问题3'">{{selectItemKey3!== '' ? selectItemKey3:'请选择' }}
                <!-- <img class="toRight fr" src="../../../assets/images/pllist-ico.png" alt  ="toRight"> -->
                  </span>
              <i class="toRight fr"></i>
            </div>
          </a>
          <div class="bottom-bomb bomb-danxuan bg-f1" v-if="item.AccountInfoType == 2 && isShowEmile">
            <div>{{item.PropertyType}}</div>
            <div class="bomb-title border-bottom border-top bg-fff">
              <h1 class="f32 color-666 text-center">{{item.Name}}</h1>
              <i class="bomb-close" @click="closeModal()"></i>
            </div>
            <div class="bomb-content">
              <ul class="bomb-li-item bg-fff">
                <li v-if="v!=selectItemKey1&&v!=selectItemKey2&&v!=selectItemKey3" v-for="v in item.Options" @click="selectValue(v)" class="border-bottom">{{v}}</li>
              </ul>
            </div>
          </div>
        </section>
        <div class="order-container bg-fff f30  color-000 border-bottom" v-if="item.AccountInfoType != 2">
          <span :class="{'span-icon-xinhao':item}">{{item.Name}}</span>
          <input type="text" :maxlength="item.MaxLength" class="isTotalInput" :placeholder="'请输入'+item.Name" :id="item.Id" :title="item.Name" @focus="onFocusN()">
        </div>
        <div class="contaner-qq isShowOrHide" v-if="entity.AccountInfoType == 4&&!emileGameAccount&& !isEmileGameAccount&&item.AccountInfoType != 2" style="display: none">
          <p class="f24 border-bottom ">请输入{{item.Name}}</p>
        </div>
        <div class="contaner-qq isShowOrHides" v-if="entity.AccountInfoType == 4&&!emileGameAccount&& !isEmileGameAccount&&item.AccountInfoType == 2" style="display: none">
          <p class="f24 border-bottom ">请选择{{item.Name}}</p>
        </div>
      </div>

      <div class="contaner-qq" v-if="accountName">
        <p class="f24 border-bottom">{{accountMessage}}</p>
      </div>

        <div class="contaner-qq" v-if="qqGame && qqGameAccount">
            <p class="f24 border-bottom ">注：如果您出售的QQ游戏帐号和登入5173帐号一致，交易成功后，您的5173帐号将会一起被出售，导致您人财两空，请您注意。</p>
        </div>
        <div class="contaner-qq" v-if="qqGame && qqGamePwd">
            <p class="f24 border-bottom">注：由于腾讯异地登入会出现冻结保护，建议您先到QQ安全中心绑定手机再进行发布。</p>
        </div>
        <div class="contaner-qq fw border-bottom" :id="'err'+entity.Id" v-if="error">
             <p class="f24">请输入{{entity.Name}}</p>
        </div>
  </div>
</template>
<script type="text/javascript">
  import api from '../../../api'
  export default{
    props:['saveFixed','entity','qqGame','isAllName'],
    data(){
      return {
        id: 'fixedComponent',
        value: '',
        error: false,
        game_type: this.$route.query.game_type,
        qqGameAccount: false,//QQ游戏账号提示判断
        qqGamePwd: false,//QQ游戏密码提示判断
        isShow: false,
        selectItemKey: '',
        emileGameAccount: false,
        AllInforType:false,
        EMailSuffixs:[],
        isEmileGameAccount:false,
        EMailRegInfoConfigs:[],
        isShowEmile:false,
        isShowEmile1:false,
        isShowEmile2:false,
        isShowEmile3:false,
        selectItemKey1:"",
        selectItemKey2:"",
        selectItemKey3:"",
        valueName1:"",
        valueName2:"",
        valueName3:"",
        isEmileGameShow:false,
        accountName:false,
        accountMessage:"",

      }
    },
    watch: {
      value(val) {
        this.saveValue(val);
      },
      isAllName(val){
        console.log('从父组件传过来的',val)
          if(this.value==""){
            this.AllInforType = true
            this.emileGameAccount = true;
          }else{
            this.AllInforType = false
            this.emileGameAccount = false;
          }

      }
    },
    created(){
      if(this.entity.AccountInfoType == 4){
          let params = {
            ServiceType : 5,
          }
          api.seller.getTCRegInfoMailSuffixs(params).then((res)=> {
            if(res.body.success){
              this.EMailSuffixs = JSON.parse(res.body.result).BizResult.EMailSuffixs
              console.log("emile返回",JSON.parse(res.body.result).BizResult.EMailSuffixs)
            }

          })



      }
       this.$on('showFixedError',(list)=>{
         this.error = list[this.entity.Id];
       });
       this.$on('setValue',(val)=>{
         this.value = val[this.entity.Id];
       })
    },
    methods:{
      isEmileNext(item){
        var value = (this.value+"").split("@")[0];
        this.value = value + item;
        this.isItem = item
        this.isEmileGameAccount = false;
      },
      onFocusN(){
        var isShowOrHide = document.getElementsByClassName("isShowOrHide");
        for(var i=0;i<isShowOrHide.length;i++){
          isShowOrHide[i].style.display = "none"
        }

      },
      onBlur(){
        this.AllInforType = false;
         if(this.entity.AccountInfoType == 0){
            this.qqGameAccount = false
         }else if(this.entity.Name == "游戏密码"){
            this.qqGamePwd = false
         }
         if(this.entity.Name=="游戏帐号"){

           var strParms = {
             "gameId":this.$route.query.game_id,
             "idLoginName":this.value,
           }
           this.$parent.parengAccount = false;
           api.seller.checkidbizhistoty(strParms).then((res)=> {
             this.$parent.parengAccount = true;
             if(res.body.success+""=="false"){
               this.accountName = true;
               this.$parent.parengAccountName = res.body.responseStatus.message+"";
               this.accountMessage = res.body.responseStatus.message;
             }else{
               this.$parent.parengAccountName = false;
               this.accountName = false
             }
           })
         }
        let vm =this;
         if(this.entity.AccountInfoType == 4){
           setTimeout(()=>{
             this.isEmileGameAccount = false
             var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
             if(!myreg.test(this.value)) {
               this.emileGameAccount = true;
               return false;
             }else {
               console.log(this.value.split("@")[1])
               this.emileGameAccount = false;
               let paramssss = {
                 EMail :"@"+this.value.split("@")[1],
                 ServiceType: 5,
                 RequestSource: "Msite"
               }
               api.seller.getTCEMailRegInfo(paramssss).then((res)=> {
                 if(res.body.success){
                   vm.EMailRegInfoConfigs = [];
                   let pm = JSON.parse(res.body.result).BizResult.RegInfoConfigs
                   for(var i =0 ; i < pm.length;i++){
                     if(pm[i].AccountInfoType == 0 ){
                       vm.EMailRegInfoConfigs.push(pm[i])
                     }else if(pm[i].InfoFillTypes){
                       for (var tm in pm[i].InfoFillTypes){
                         if(pm[i].InfoFillTypes[tm] == 0){
                           vm.EMailRegInfoConfigs.push(pm[i])
                         }
                       }
                     }
                   }

//                   this.EMailRegInfoConfigs = JSON.parse(res.body.result).BizResult.RegInfoConfigs;
                   console.log("这是个啥",vm.EMailRegInfoConfigs)
                 }
               })
             }
           },100)


         }

          },
      onFocus() {
        this.accountName = false
        if(this.entity.AccountInfoType == 4){
          this.isEmileGameAccount = false
        }

          this.AllInforType = false;
          this.emileGameAccount = false
          if(this.entity.AccountInfoType == 0 && this.game_type == 1){
              this.qqGameAccount = true
          }else if(this.entity.Name == "游戏密码" && this.game_type == 1 ){
              this.qqGamePwd = true
          }
      },
      closeModal:function  () {
        let vm = this;
        vm.isShow = false;
        vm.isShowEmile =false;
      },
      showEmile:function (item) {
        var isShowOrHides = document.getElementsByClassName("isShowOrHides");
        for(var i=0;i<isShowOrHides.length;i++){
          isShowOrHides[i].style.display = "none"
        }
        this.isShow = true
        console.log(item.Name)
        this.isShowEmile = true
        if(item.Name=="邮箱密保问题1"){
          this.isShowEmile1 = true
          this.isShowEmile2 = false
          this.isShowEmile3 = false
        }else if(item.Name=="邮箱密保问题2"){
          this.isShowEmile1 = false
          this.isShowEmile2 = true
          this.isShowEmile3 = false
        }else if(item.Name=="邮箱密保问题3"){
          this.isShowEmile1 = false
          this.isShowEmile2 = false
          this.isShowEmile3 = true
        }

      },
      show:function  () {
        let vm = this;
        vm.isShow = true;
      },
      selectValue:function  (v) {
        let vm = this;
        console.log(v)
        if(this.isShowEmile1 == true){
          vm.selectItemKey1 = v;
        }else if(this.isShowEmile2 == true){
          vm.selectItemKey2 = v;
        }else if(this.isShowEmile3 == true){
          vm.selectItemKey3 = v;
        }
        vm.selectItemKey = v;
        vm.saveValue(v);
        vm.isShow = false;
        vm.isShowEmile =false;
      },
      saveValue(val){
          if (val) {
              this.error = false;
          }
          if (this.saveFixed) {
              this.saveFixed({
                 Id:this.entity.Id,
                 Value:val,
                 Name:this.entity.Name,
                 AccountInfoType:this.entity.AccountInfoType
              });
          };
      },
      checkError(index){
        if (this.value === ' ') {
            this.value = this.value.replace(/\s/ig, '')
        }
        if(index==2){
          var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
          if(!myreg.test(this.value)) {
            this.$parent.emileGameAccounts = true;
          }else {
            this.$parent.emileGameAccounts = false;
          }
        }
        this.show = this.$parent.fixedRequired[this.entity.Id];
      }
    },
    filters :{
      valueSplite:function (val) {
        return (val+"").split("@")[0]
      }
    }
  }
</script>
<style src="css/common/publish-cl.css" ></style>
<style scoped>
  .ConBox{
    margin: 0;
    left: 0;
    position: fixed;
    overflow: hidden;
        height: 100%;
  }
  .ConBox .Jbox{
    width: 100%;
      background: white;
      overflow: scroll;
      /*position: fixed;*/
      height: 100%;
    top:0;
    z-index: 20;
    padding-bottom: 2rem;
  }

.bottom-bomb{
  z-index: 20;
}
.dialog_cover{
  z-index: 19;
}
.item-container{
  position: relative;
  display: block;
  overflow-y: scroll;
  margin-top: -0.1rem;
  background: #f1f1f1;
}
.item-case{
  height: 3.6rem;
  overflow: scroll;
  font-size: 0.30rem;
  margin-left: 2.7rem;
  border-bottom: 1px solid #e0e0e0;

}
  .item-case p{
    line-height: 0.8rem;
    margin-left: 0.2rem;
    height: 0.8rem
  }
</style>
